<template>
  <div class="auth-container">
    <!-- 加载遮罩层 -->
    <div class="loading-overlay" v-if="isLoading">
      <div class="spinner"></div>
      <div class="loading-text">验证中，请稍候...</div>
    </div>
    
    <!-- 头部区域 -->
    <div class="header">
      <div class="header-content">
        <div class="header-text">请勿离开此页面，多等一会</div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="instruction-section">
        <div class="section-title">使用教程：</div>
        <div class="instruction-item">不要离开此页面，页面会自动刷新</div>
        <div class="instruction-item">自动跳转认证（<span class="highlight-text">如下图</span>）</div>
        <div class="instruction-item">一定填写微信群里发的学校，验证完要及时发以下两张截图</div>
      </div>

      <!-- 图片展示区域 -->
      <div class="image-container">
        <div class="image-wrapper">
          <img src="@/assets/left.jpg" alt="步骤1" class="step-image">
        </div>
        <div class="arrow-icon">→</div>
        <div class="image-wrapper">
          <img src="@/assets/right.jpg" alt="步骤2" class="step-image">
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>

  export default {
    name: 'EducationAuth',
    data() {
      return {
        isLoading: true, // 新增加载状态
        isSuccess: false,
        pollInterval: null,
        code:""
      }
    },
    mounted() {
     this.code = this.$route.params.code;  
      this.startPolling()
    },
    beforeDestroy() {
      this.stopPolling()
    },
    methods: {
      startPolling() {
      this.pollInterval = setInterval(async () => {
        try {
          const response = await this.$axios.get(
            '/scan/getScan',
            {
              params: {
                code: this.code,
              }
            }
          )
          if (response.data.data !== null) {
            this.isLoading = false; // 验证成功，隐藏加载状态
            this.isSuccess = true;
            this.stopPolling();
            debugger
            window.location.href = response.data.data;
          }
        } catch (error) {
          console.error('轮询出错:', error);
          this.isLoading = false; // 出错时也隐藏加载状态
        }
      }, 500);
    },
    stopPolling() {
      if (this.pollInterval) {
        clearInterval(this.pollInterval);
        this.pollInterval = null;
      }
    }
  }
}
  </script>
  
  <style scoped>
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

.loading-text {
  font-size: 1.2rem;
  color: #333;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 原有样式保持不变 */
.auth-container {
  max-width: 100%;
  padding: 20px 30px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  margin-top: 20px;
  background-color: white;
  padding: 15px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
  .header-content {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .header-text {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 0;
    color: red;
  }
  
  /* 主要内容区域 */
  .main-content {
    max-width: 600px;
    margin: 0 auto;
  }
  
  /* 使用教程部分 */
  .instruction-section {
    padding: 20px;
    margin-top: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .section-title {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
  }
  
  .instruction-item {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #333;
  }
  
  .highlight-text {
    color: red;
  }
  
  /* 图片展示区域 */
  .image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
   
  }
  
  .image-wrapper {
    flex: 1;
    text-align: center;
  }
  
  .step-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  .arrow-icon {
    font-size: 3rem;
    margin: 0 20px;
    color: red;
    font-weight: bold;
  }
  
  /* 加载指示器 */
  .loading-indicator {
    text-align: center;
    margin: 30px 0;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #007aff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
  }
  
  .loading-text {
    color: #666;
    font-size: 1.2rem;
  }
  
  /* 动画 */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* 响应式调整 */
  @media (max-width: 375px) {
    .header-text {
      font-size: 1.2rem;
    }
    
    .section-title {
      font-size: 1.1rem;
    }
    
    .instruction-item {
      font-size: 1rem;
    }
    
    .arrow-icon {
      font-size: 2rem;
      margin: 0 10px;
    }
    
    .image-container {
      flex-direction: column;
    }
    
    .arrow-icon {
      transform: rotate(90deg);
      margin: 10px 0;
    }
  }
  </style>